<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气查询应用</title>
    <link rel="stylesheet" href="weather-app.css">
</head>
<body>
    <div class="container">
        <h1>🌤️ 天气查询</h1>
        
        <div class="search-container">
            <input type="text" id="city-input" placeholder="请输入城市名称">
            <button id="search-btn">搜索</button>
        </div>
        
        <div class="location-btn-container">
            <button id="location-btn">获取当前位置天气</button>
        </div>
        
        <div id="weather-info" class="weather-info hidden">
            <h2 id="city-name">城市名称</h2>
            <div class="temperature-container">
                <span id="temperature">--</span>
                <span class="temp-unit">°C</span>
            </div>
            <div class="weather-description">
                <span id="description">天气描述</span>
            </div>
            <div class="weather-details">
                <p>感觉温度: <span id="feels-like">--</span>°C</p>
                <p>湿度: <span id="humidity">--</span>%</p>
                <p>风速: <span id="wind-speed">--</span> m/s</p>
            </div>
            <p class="update-time">更新时间: <span id="update-time">--</span></p>
        </div>
        
        <div id="error-message" class="error-message hidden">
            <p>无法获取天气信息，请检查网络连接或城市名称</p>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="weather-app-gaode.js"></script>
</body>
</html>